<template>
  <!-- // 导出按钮  -->
  <el-button type="success" icon="el-icon-upload" @click="exportEvent">导出</el-button>
</template>

<script>
// 引入导出插件
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data() {
    return {}
  },
  // 需要的参数
  props: {
    id: {
      type: String,
      default: 'Table'
    },
    name: {
      type: String,
      default: 'Table'
    }
  },
  methods: {
    // 导出Excel表格事件
    exportEvent() {
      const gatherData = { raw: true }
      const grid = XLSX.utils.table_to_book(
        document.querySelector('#' + this.id),
        gatherData
      )
      const workbook = XLSX.write(grid, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([workbook], {
            type: 'application/octet-stream'
          }),
          this.name + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, workbook)
      }
      return workbook
    }
  }
}
</script>
